<template>
  <div>
    <h1>我是𝒆𝒅.</h1>
    <h1>num : {{ num }}</h1>
    <button @click="num++">num++</button>
  </div>
</template>
<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  ref
} from 'vue'

export default {
  setup() {
    const num = ref(0)

    const getInitData = () => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve(10)
        }, 2000)
      })
    }
    onBeforeMount(async () => {
      const initNum = await getInitData()
      num.value = initNum

      console.log('onBeforeMount')
    })

    onMounted(() => {
      console.log('onMounted')
    })

    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })

    onUpdated(() => {
      console.log('onUpdated')
    })

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })

    onUnmounted(() => {
      console.log('onUnmounted')
    })

    onErrorCaptured(() => {
      console.log('onErrorCaptured')
    })

    console.log('setup执行了')

    return { num }
  }
}
</script>
<style scoped></style>
